import React from 'react';
import '../../style/index/Home.scss'
import axios from 'axios'
import { useEffect , useState} from 'react'
import ReactECharts from 'echarts-for-react';
// echarts
import * as echarts from 'echarts';
import Echarts from '../../componets/Echarts'
import {HomeOutlined } from '@ant-design/icons';
import {query_hometotal,home_class,home_college,home_xian} from '../../utils/apileave'

function Home(props) {
    var [total,setTotal] =useState([])
    var [myclass,setMyclass] = useState([])
    var [college,setCollege] = useState([])
    var [xianlist,setXianlist] = useState([])
    useEffect(()=>{
        // 折线图部分
    // 在组件的挂载期去获取DOM节点
    var chartDom = document.getElementById('mains');
    var myChart = echarts.init(chartDom);
        // 请求学校总人数hometotal
        query_hometotal().then((res)=>{
            console.log("封装",res)
            setTotal(res.data[0])
            // console.log(total)
        })
        // 请求班级数据
        home_class().then((res)=>{
            console.log("班级数据",res.data[0])
            setMyclass(res.data[0])
        })
        // 请求学校二级学院人数占比
        home_college().then((res)=>{
            console.log("二级学院占比",res.data)
            setCollege(res.data)
        })
        // 请求西安疫情数据
        home_xian().then((res)=>{
            console.log("西安",res)
            setXianlist(res.data[0])
            // 折线图部分
    // 在组件的挂载期去获取DOM节点
    var chartDom = document.getElementById('mains');
    var myChart = echarts.init(chartDom);
    
    myChart.setOption({
        title: {
          text: '西安疫情变化趋势'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['治愈', '隔离', '无症状', '确诊']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月']
        },
        yAxis: {
          type: 'value',
         
        },
        series: [
          {
            name: '治愈',
            type: 'line',
            stack: 'Total',
            data: res.data[0].cure
          },
          {
            name: '无症状',
            type: 'bar',
            stack: 'Total',
            data: res.data[0].asymptomatic
          },
          {
            name: '隔离',
            type: 'bar',
            stack: 'Total',
            data: res.data[0].quarantine
          },
          {
            name: '确诊',
            type: 'line',
            stack: 'Total',
            data: res.data[0].diagnosis
          },
          {
            name: '死亡',
            type: 'bar',
            stack: 'Total',
            data: res.data[0].death
          }
        ]
      }) ;
        })

    // 玫瑰图
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    myChart. setOption (
        {
            legend: {
              top: 'bottom'
            },
            toolbox: {
              show: true,
              feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            series: [
              {
                name: 'Nightingale Chart',
                type: 'pie',
                radius: [30, 180],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                  borderRadius: 8
                },
                data: [
                  { value: 40, name: '信工学院' },
                  { value: 38, name: '文教学院' },
                  { value: 32, name: '商学院' },
                  { value: 30, name: '管理学院' },
                  { value: 28, name: '中职校' },
                  { value: 26, name: '医药学院' },
                  { value: 22, name: '珠宝学院' },
                  { value: 18, name: '继教学院' }
                ]
              }
            ]
          }
          
    ) 
    // 折线图部分
    // 在组件的挂载期去获取DOM节点
    var chartDom = document.getElementById('mains');
    var myChart = echarts.init(chartDom);
    
    myChart.setOption({
        title: {
          text: '西安疫情变化趋势'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['治愈', '隔离', '无症状', '确诊']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月']
        },
        yAxis: {
          type: 'value',
         
        },
        series: [
          {
            name: '治愈',
            type: 'line',
            stack: 'Total',
            data: xianlist.cure
          },
          {
            name: '无症状',
            type: 'line',
            stack: 'Total',
            data: xianlist.cure?xianlist.asymptomatic:''
          },
          {
            name: '隔离',
            type: 'bar',
            stack: 'Total',
            data: xianlist.cure?xianlist.quarantine:''
          },
          {
            name: '确诊',
            type: 'line',
            stack: 'Total',
            data: xianlist.cure?xianlist.diagnosis:''
          },
          {
            name: '死亡',
            type: 'bar',
            stack: 'Total',
            data: xianlist.cure?xianlist.death:''
          }
        ]
      }) ;
    },[])
    // // 图表部分
    var titlelist = { name:"疫情实时情况一览",type:["bar"] }
    var datalist={datas:[{data:[50,45,5,1],name:'班级情况'}],xAxis:["班级人数","绿码","隔离","确诊"]}
    
    // 折线图部分
    // 监听xianlist数组中的数据有值时去渲染一下
    useEffect(()=>{
        console.log("改变了")
    },[xianlist])
    
    

    return (
        <div className='home'>
            <div className='title'><h3> <HomeOutlined />  我的桌面</h3></div>
            <div className='name'>
                <div className='texts'>
                    欢迎您：<span>超级管理员</span> !
                </div>
            </div>
            <div className='box3'>
                <div className='box1 '>
                    <div>学生总数</div>
                    <div>
                        {
                            total.diagnosis?total.total:""
                        }
                        </div>
                </div>
                <div className='box1 box11'>
                    <div>绿码人数</div>
                    <div>{
                            total.diagnosis?total.healthy:""
                        }</div>
                </div>
                <div className='box1 box2'>
                    <div>隔离人数</div>
                    <div>{
                            total.diagnosis?total.quarantine:""
                        }</div>
                </div>
                <div className='box1 box3'>
                    <div>确诊人数</div>
                    <div>{
                            total.diagnosis?total.diagnosis:""
                        }</div>
                </div>
            </div >
            <div className='list'>
                <div className='echats1'>
                    <div className='test'><i>疫情当下，事无大小，做好防护，努力拼搏</i> </div>
                    <div className='test2'><i>疫情防护不关是对自己负责，更是对同学对班级的负责！</i> </div>
                    <Echarts  titlelist={titlelist} datalist={datalist} />
                </div>
                <div className='echats2' id='main'>
                </div>
            </div>
            <div className='lien' id='mains'>
            
            </div>
        </div>
    );
}

export default Home;